<template>
  <div class="allin">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="homeinfo.community"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div>
      <!-- 轮播图部分  -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image width="100%" height="100%" lazy-load :src="houseImg" />
        </van-swipe-item>
      </van-swipe>
      <div>{{ homeinfo.description }}</div>
      <van-tag type="primary">{{ homeinfo.tags }}</van-tag>
      <!-- 房屋信息 -->
      <van-cell-group>
        <van-cell>
          <template #title>
            <h3 class="custom-title"></h3>
            <van-tag color="#e1f5f8" text-color="#39becd"></van-tag>
          </template>
        </van-cell>
        <van-divider
          :style="{ borderColor: '#333', padding: '0 16px', margin: '0px' }"
        />
        <van-cell>
          <van-grid :column-num="3">
            <van-grid-item class="infobox">
              <div class="red">
                <span
                  ><b>{{ homeinfo.price }}元/月</b></span
                >
              </div>
              <div class="small">租金</div>
            </van-grid-item>
            <van-grid-item class="infobox">
              <div class="red">{{ homeinfo.roomType }}</div>
              <div class="small">房型</div>
            </van-grid-item>
            <van-grid-item class="infobox">
              <div class="red">{{ homeinfo.size }}</div>
              <div class="small">面积</div>
            </van-grid-item>
          </van-grid>
        </van-cell>
        <van-divider
          :style="{ borderColor: '#333', padding: '0 16px', margin: '0px' }"
        />
        <van-cell>
          <van-grid direction="horizontal" :column-num="2" :center="false">
            <van-grid-item><span class="abc">装修：</span>精装</van-grid-item>
            <van-grid-item>
              <span class="abc">朝向：{{ homeinfo.oriented }}</span>
            </van-grid-item>
            <van-grid-item>
              <span class="abc">楼层：{{ homeinfo.floor }}</span>
            </van-grid-item>
            <van-grid-item
              ><span class="abc">类型：</span>普通住宅</van-grid-item
            >
          </van-grid>
        </van-cell>
      </van-cell-group>
      <van-button type="default"><van-icon name="star-o" @click="toggleCollect"/>收藏</van-button>
      <van-button type="default">在线咨询</van-button>
      <van-button type="primary">电话预约</van-button>
    </div>
  </div>
</template>

<script>
import { getHomeinfo, getCollect } from '@/api/user'
export default {
  name: 'homeinfo-page',
  data () {
    return {
      homeinfo: {},
      houseImg: ''
    }
  },
  async created () {
    const id = this.$route.query.id
    // console.log(id)
    const data = await getHomeinfo(id)
    // console.log(data)
    this.homeinfo = data.body
    // console.log(this.homeinfo)
    this.houseImg = 'http://liufusong.top:8080' + data.body.houseImg[0]
  },
  methods: {
    async toggleCollect () {
      const data = await getCollect(this.homeinfo.houseCode)
      console.log(data)
    }
  }
}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}
.load {
  position: absolute;
  top: 40%;
  text-align: center;
  width: 100%;
  height: 100%;
}
.allin {
  color: #333;
  background-color: #f6f5f6;
}

h3 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  height: 250px;
  text-align: center;
}
.infobox {
  .red {
    font-size: 18px;
    color: #fa5741;
    font-weight: 800;
    span {
      font-size: 12px;
      font-weight: 800;
    }
  }
  .small {
    font-size: 14px;
    color: #999;
  }
}
.abc {
  font-size: 13px;
  color: #999;
}
.a {
  background: greenyellow;
  color: #fff;
}
</style>
